<template>
  <div class="lab">
    {{ route.query.title }}
    <div>
      <input
        type="text"
        v-model="customIn"
        placeholder="请输入课程名称"
        class="courseIn"
      />
    </div>
    <ul>
      <li v-for="labs in labList" :key="labs.id">
        {{ labs.name }}
        <button @click="deleteCourse(labs.id, labs.name)">删除</button>
      </li>
    </ul>
    <button @click="addCourse">确定</button>
  </div>
</template>

<script setup lang="ts" name="Lab">
import { useRoute } from "vue-router";
import { onMounted, ref } from "vue";
import { getLabListAPI } from "../../../apis/test";
import axios from "axios";

let labList = ref();
let route = useRoute();
let customIn = ref();
//let delItem = ref([])

const getLabList = async () => {
  const res = await getLabListAPI();
  console.log(res);
  labList.value = res.data;
};

function addCourse() {
  axios({
    //请求类型
    method: "POST",
    //URL
    url: "http://localhost:3000/test",
    data: {
      name: customIn.value,
    },
  });
}

//http://localhost:3000/test/1
function deleteCourse(value1: string, value2: string) {
  axios({
    method: "DELETE",
    url: "http://localhost:3000/test/" + `${value1}`,
    data: {
      name: value2,
    },
  });
}

onMounted(() => {
  getLabList();
});
</script>

<style scoped>
.lab {
  background-color: rgb(223, 250, 250);
  border-radius: 10px;
  box-shadow: 0 0 10px;
  text-align: center;
}
li {
  list-style-type: none;
}
.courseIn {
  margin-top: 20px;
}
input ::placeholder {
  color: gray;
}
button {
  margin-left: 20px;
}
</style>
